<!DOCTYPE html>

<head>

    <!-- <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0" /> -->
    <!-- <title id="title-meta">安捷能源</title> -->

    <!-- 本页面对应css -->
    <link rel="stylesheet" th:href="@{/css/model-generator-2.css}">
<!--    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->
    <link rel="stylesheet" type="text/css" th:href="@{/js/elementui/theme-chalk/index.css}"/>


    <!-- 引入公共css -->
    <div th:insert="main :: common_head"></div>

    <style>
        .el-upload__input {
            display: none !important;
        }

        .el-input__inner {
            margin-bottom: 0 !important;
        }

        .el-table th.gutter {
            display: table-cell !important;
        }

        .el-table colgroup.gutter {
            display: table-cell !important;
        }

        .el-table .warning-row {
            background: red;
        }

        .el-table .success-row {
            background: yellow;
        }

        #content{
            background-color: #0c1226
        }

        .el-tabs__header{
            margin: 0 20px 15px;
        }
        .el-tabs__item {
            color: white;
        }
        .el-tabs__item.is-active{
            color: #04dff9;
        }
        .el-tabs__item:hover {
            color: #04dff9;
        }
        .el-tabs__nav-wrap::after{
            background-color: #0b467c;
            color: #0b467c;
        }
        .el-tabs__active-bar{
            background-color: #04dff9;
            color: #04dff9;
        }
        .app-word{
            color: white;
            margin: 5px 10px 5px 5px;
        }
        .app-word-tip{
            color: #c911e6;
            font-size: 10px;
            margin: 5px 5px 5px 5px;
        }
        .app-flex-div{
            display: flex;
            flex-direction: row;
        }
        .upload-demo{
            display: flex;
            margin: 0 5px;
        }
        .el-input__inner{
            background-color: #0b2744!important;
            color: white!important;
            font-size: 10px!important;
            width: 138px!important;
        }
        .el-date-editor.el-input{
            width:140px!important;
        }
        .el-input__icon{
            height: 60%!important;
        }
        .el-table thead{
            color: #046ab6!important;
        }
        .el-table tr{
            background-color: #0b2746;
            color: white;
        }
        .el-table th {
            background-color: #033d67!important;
        }
        /*去掉el-table最下面的横线*/
        .el-table::before{
            display: none;
        }
        .el-table__fixed::before{
            display: none;
        }
        .el-table__empty-text {
            color: white;
        }
        /*去掉el-table的滚动条*/
        .el-table__body-wrapper::-webkit-scrollbar {
            width: 0;
        }
        .el-table td,.building-top .el-table th.is-leaf {
            border-bottom:  1px solid #007ACC!important;
        }
        .el-table__body .el-table__row.hover-row td {
            background-color: #033d67 !important;
        }
        .el-input__suffix{
            height: 157%!important;
        }
        .el-tag{
            color: white!important;
            background-image: linear-gradient(to right,#00E0FF, #0063FF);
        }
        /*修改模型说明输入框的宽度*/
        #modelInfoInput.el-input__inner{
            width: 200px!important;
        }
    </style>
</head>

<body>
    <div class="row-fluid">
        <div id="content" class="span10" style="width: 100%">
            <div class="app" id="app" v-cloak>
                <div>
                    <el-tabs v-model="activeName" @tab-click="handleClick">
                        <el-tab-pane label="训练数据生成" name="first">
                            <div class="body">
                                <div class="left-items">
                                    <div class="left-model-generator">
                                        <div class="generator-model-list-item">
                                            <!-- <div class="item-top-title">数据生成</div> -->
                                            <div class="new-strategy-control ">
                                                <div class="control-select">
                                                    <div class="app-flex-div">
                                                        <div class="app-word">起止时间</div>
                                                        <div class="app-flex-div">
                                                    <el-date-picker v-model="startTime" type="date"
                                                        placeholder="开始日期" size="small" class="date-select">
                                                    </el-date-picker>
                                                    <el-date-picker v-model="endTime" type="date"
                                                        placeholder="截止日期" size="small" class="date-select">
                                                    </el-date-picker>
                                                        </div>
                                                    </div>
                                                    <div class="app-flex-div">
                                                        <div class="app-word-tip">
                                                            只能上传excel/csv文件，且文件第一列必须为日期元素</div>
                                                        <div>
                                                        <el-upload class="upload-demo" ref="upload"
                                                            action="https://jsonplaceholder.typicode.com/posts/"
                                                            :on-change="fileChange" :limit=1
                                                            :file-list="fileList" :auto-upload="false"
                                                            :multiple="false" :on-remove="fileRemove">
                                                            <el-button slot="trigger" size="small"
                                                                type="primary">选取文件
                                                            </el-button>
                                                            <el-button style="margin-left: 10px;" size="small"
                                                                type="primary"
                                                                @click="trainDataPageGenDataUpload">生成数据
                                                            </el-button>
                                                            <el-button @click="download" type="primary"
                                                                       style="margin-left: 10px!important;"
                                                                size="small" class="model-genenrator-btn">下载模板
                                                            </el-button>
                                                        </el-upload>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="table-data">
                                            <el-table :data="tableData" style="background: #103864;border-radius: 9px;"
                                                height="600" ref="table">
                                                <template v-for="(item,index) in tableHeader">
                                                    <el-table-column :prop="item.column_name"
                                                        :label="item.column_comment" :key="index" width="127"
                                                        fixed v-if='index===0'>
                                                    </el-table-column>
                                                    <el-table-column :prop="item.column_name"
                                                        :label="item.column_comment" :key="index" width="127"
                                                        v-else>
                                                    </el-table-column>
                                                </template>
                                            </el-table>
                                        </div>
                                        <div class="generator-model-list-item model-generator-control">
                                            <div class="input-data-model">
                                                <div class="input-data-font">模型名 </div>
                                                <div>
                                                <el-input v-model="modelName" placeholder="模型名" size="small">
                                                </el-input>
                                                </div>
                                            </div>

                                            <div class="input-data-model">
                                                <div class="input-data-font">模型说明 </div>
                                                <div>
                                                <el-input v-model="modelInfo" placeholder="模型说明" size="small" id="modelInfoInput">
                                                </el-input>
                                                </div>
                                            </div>
                                            <div>
                                                <el-button type="primary" size="small" @click="generatorModel"
                                                    :disabled=genDisabled>生成模型
                                                </el-button>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="预测数据生成" name="second">
                            <div>
                                <div class="generator-model-list-item">
                                    <div class="model-select-control">
                                        <div class="app-word">选择模型：</div>
                                        <el-select v-model="source_mode" placeholder="源模型" size="small"
                                            id="eleSourceModel" @change="modelSelectChange">
                                            <el-option v-for="item in source_modes" :key="item.modelVersion"
                                                :label="item.modelName" :value="item.modelVersion">
                                                <el-tooltip placement="right-end"
                                                            effect="light"
                                                            :content="item.modelInfo">
                                                        <el-button type="text" style="width:100%;color:black;text-align: left">
                                                        {{item.modelName}}
                                                        </el-button>
                                                </el-tooltip>
                                            </el-option>
                                        </el-select>
                                        <div class="upload-file-style">
                                            <el-upload class="upload-demo" ref="upload"
                                                action="https://jsonplaceholder.typicode.com/posts/"
                                                :on-change="modelGenFileChange" :limit=1
                                                :on-remove="modelGenFileRemove" :file-list="modelGenFileList"
                                                :auto-upload="false" :multiple="false">
                                                <el-button slot="trigger" size="small" type="primary"
                                                    :disabled="prePageBeforeSelectModeDisable">选取文件
                                                </el-button>
                                                <div slot="tip" class="app-word-tip">
                                                    只能上传excel/csv文件，且文件第一列必须为日期元素</div>
                                            </el-upload>
                                        </div>
                                    </div>
                                    <div class="new-strategy-control ">
                                        <div class="control-select1">
                                            <div class="app-word">起止时间</div>
                                            <el-date-picker v-model="generatorModelStartDate" type="date"
                                                placeholder="开始日期" size="small" class="date-select">
                                            </el-date-picker>
                                            <el-date-picker v-model="generatorModelEndDate" type="date"
                                                placeholder="截止日期" size="small" class="date-select">
                                            </el-date-picker>
                                            <el-button type="primary" size="small" class="model-genenrator-btn"
                                                @click="preDataPageGenDataUpload"
                                                :disabled="prePageBeforeSelectModeDisable">生成数据</el-button>
                                            <el-button style="margin-left: 10px;" size="small" type="primary"
                                                @click="predictData" :disabled=preDisabled>预测数据</el-button>
                                        <el-progress style="padding-top: 10px;margin-left: 20px; width: 800px;" v-show="process != undefined" :stroke-width="3" :percentage="process"></el-progress>
                                        </div>
                                    </div>
                                </div>
                                <div class="table-data">
                                    <el-table :data="tableData1" style="background: #103864;border-radius: 9px;"
                                        height="400" ref="table">
                                        <template v-for="(item,index) in tableHeader1">
                                            <el-table-column :prop="item.column_name"
                                                :label="item.column_comment" :key="index" width="127" fixed
                                                v-if='index===0'>
                                            </el-table-column>
                                            <el-table-column :prop="item.column_name"
                                                :label="item.column_comment" :key="index" width="127" v-else>
                                            </el-table-column>
                                        </template>
                                    </el-table>
                                </div>
                                <div style="display:flex;justify-content: center">
                                <el-tag class="tag-style" v-if="analyseValue != ''">{{modelName}}准确率:
                                    {{analyseValue}}</el-tag>
                                <el-tag class="tag-style" v-if="analyseValue1 != ''">{{selectModelName}}准确率:
                                    {{analyseValue1}}</el-tag>
                                </div>
                                <div id="energyGraph" class="energy-graph"></div>
                                <div class="select-model-control">
                                    <el-button type="primary" size="medium" class="model-genenrator-btn"
                                        @click="keepOld" :disabled="prePageBeforeSelectModeDisable">保持旧模型
                                    </el-button>
                                    <el-button type="danger" size="medium" class="model-genenrator-btn"
                                        @click="useNew" :disabled="prePageBeforeSelectModeDisable">使用新模型
                                    </el-button>
                                </div>
                            </div>
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </div>
        </div>
    </div>

    <script th:src="@{/js/jquery-1.9.1.min.js}"></script>
    <script th:src="@{/js/echarts.min.js}"></script>
    <script th:src="@{/js/time.js}"></script>
    <script th:src="@{/layer/layer.js}"></script>
    <script th:src="@{/js/jquery.blockUI.js}"></script>
    <script th:src="@{/js/tools.js}"></script>
    <script th:inline="javascript" th:src="@{/js/vue.min.js}"></script>
    <script th:inline="javascript" th:src="@{/js/vue.js}"></script>

    <script th:src="@{/js/detect-element-resize.js}"></script>
    <script th:src="@{/js/iframe-resize.js}"></script>
<!--    <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>-->
    <script th:src="@{/js/elementui/index.js}"></script>
<!--    <script src="https://unpkg.com/element-ui/lib/index.js"></script>-->
    <script>

        let getNumParam = val => { return isNumber(val) ? val : "" }
        let BASE_URL = ""
        function reDraw(id, option) {
            let elem = document.getElementById(id)
            elem.removeAttribute("_echarts_instance_");
            let mychart = echarts.init(document.getElementById(id));
            mychart.setOption(option, true);
        }
        function drawEleChart(resultData, eleChart_) { //电量，冷热量折线图
            // console.log("resultData");
            // console.log(resultData);
            var eleChart = echarts.init(document.getElementById(eleChart_));
            // 这里直接是绘图操作
            if (eleChart != null && eleChart != "" && eleChart != undefined) {
                eleChart.dispose();
            }
            option1.series[0].data = resultData.modelList; // 下拉框值
            option1.series[1].data = resultData.historyList; // 真实值
            option1.series[2].data = resultData.selectedList;// 使用模型
            legend = {
                // orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直）
                orient: 'horizontal',
                // x 设置水平安放位置，默认全图居中，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
                x: 'center',
                // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
                y: '30',
                data: [vm.source_mode_name + '值', '实际值', resultData.selectedModel + "(使用中)"],
                textStyle: {
                    //标题颜色
                    color: "#FFFFFFFF"
                },
            };
            option1.legend = legend;
            option1.series[0].name = vm.source_mode_name + '值';
            option1.series[1].name = "实际值";
            option1.series[2].name = resultData.selectedModel + "(使用中)";
            option1.xAxis.data = resultData.dateList;
            option1.xAxis.axisLabel.interval = Math.ceil(resultData.dateList.length / 7) - 1;
            eleChart = echarts.init(document.getElementById(eleChart_));
            eleChart.setOption(option1);
            window.vm.analyseValue = resultData.analyseValues[0];
            window.vm.analyseValue1 = resultData.analyseValues[1];
        }

        var option1 = {

            title: {
                // text: '小时能量预测',
                // subtext: "明日能量",
                subtextStyle: {
                    color: "#FFFFFFFF",
                    fontSize: 20
                },
                x: '80',
                padding: [0, 0, 0, 50],
                textStyle: {
                    color: "#FFFFFFFF",
                    fontSize: '16',
                    fontWeight: '500'
                },
            },
            animation: false,
            // animationDuration:15000,

            legend: {
                // orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直）
                orient: 'horizontal',
                // x 设置水平安放位置，默认全图居中，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
                x: 'center',
                // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
                y: '30',
                data: ['当前模型值', '实际值', '所选模型值'],
                textStyle: {
                    //标题颜色
                    color: "#FFFFFFFF"
                },
            },

            //  图表距边框的距离,可选值：'百分比'¦ {number}（单位px）
            grid: {
                top: '26%', // 等价于 y: '16%'
                left: '7%',
                right: '8%',
                bottom: '3%',
                containLabel: true
            },

            // 提示框
            tooltip: {
                trigger: 'axis'
            },
            xAxis: {
                type: 'category',
                axisLine: {
                    lineStyle: {
                        // 设置x轴颜色
                        color: '#04dff9'
                    }
                },
                // 设置X轴数据旋转倾斜
                axisLabel: {
                    rotate: 0, // 旋转角度
                    interval: 1 //设置X轴数据间隔几个显示一个，为0表示都显示
                },
                // boundaryGap值为false的时候，折线第一个点在y轴上
                boundaryGap: false,
                data: ["00:00", "01:00", "02:00", "03:00", "04:00", "05:00",
                    "06:00", "07:00", "08:00", "09:00", "10:00", "11:00",
                    "12:00", "13:00", "14:00", "15:00", "16:00", "17:00",
                    "18:00", "19:00", "20:00", "21:00", "22:00", "23:00"
                ]
            },

            yAxis: {
                name: 'KWh',
                type: 'value',
                // min:0, // 设置y轴刻度的最小值
                // max:1800,  // 设置y轴刻度的最大值
                splitNumber: 9, // 设置y轴刻度间隔个数
                axisLine: {
                    lineStyle: {
                        // 设置y轴颜色
                        color: '#04dff9'
                    }
                },
            },
            series: [
                {
                    name: "实际值",
                    data: [1032, 952, 391, 1434, 1220, 1330, 1320,
                        815, 1900, 701, 1900, 2200, 1700,
                        1200, 920, 1300, 1400, 2100, 1700, 930,
                        890, 1910, 301, 510],
                    type: 'line',
                    // 设置小圆点消失
                    // 注意：设置symbol: 'none'以后，拐点不存在了，设置拐点上显示数值无效
                    symbol: 'none',
                    // 设置折线弧度，取值：0-1之间
                    smooth: 0.5,
                    itemStyle: {
                        normal: {
                            // 拐点上显示数值
                            label: {
                                show: true
                            },
                            borderColor: 'red', // 拐点边框颜色
                            lineStyle: {
                                width: 3, // 设置线宽
                                type: 'solid' //'dotted'虚线 'solid'实线
                            }
                        }
                    }
                },
                {
                    name: '当前模型值',
                    data: [890, 932, 401, 1934, 1490, 1230, 1390,
                        810, 940, 700, 1800, 1290, 1600,
                        1200, 900, 1700, 1400, 1500, 800, 950,
                        810, 1400, 401, 500],
                    type: 'line',
                    // 设置小圆点消失
                    // 注意：设置symbol: 'none'以后，拐点不存在了，设置拐点上显示数值无效
                    symbol: 'none',
                    // 设置折线弧度，取值：0-1之间
                    smooth: 0.5,
                    itemStyle: {
                        normal: {
                            // 拐点上显示数值
                            label: {
                                show: true
                            },
                            borderColor: 'yellow', // 拐点边框颜色
                            lineStyle: {
                                width: 3, // 设置线宽
                                type: 'solid' //'dotted'虚线 'solid'实线
                            }
                        }
                    }
                },
                {
                    name: '当前模型值',
                    data: [890, 932, 401, 1934, 1490, 1230, 1390,
                        810, 940, 700, 1800, 1290, 1600,
                        1200, 900, 1700, 1400, 1500, 800, 950,
                        810, 1400, 401, 500],
                    type: 'line',
                    // 设置小圆点消失
                    // 注意：设置symbol: 'none'以后，拐点不存在了，设置拐点上显示数值无效
                    symbol: 'none',
                    // 设置折线弧度，取值：0-1之间
                    smooth: 0.5,
                    itemStyle: {
                        normal: {
                            // 拐点上显示数值
                            label: {
                                show: true
                            },
                            borderColor: 'yellow', // 拐点边框颜色
                            lineStyle: {
                                width: 3, // 设置线宽
                                type: 'solid' //'dotted'虚线 'solid'实线
                            }
                        }
                    }
                },
            ],
            color: ['#04dff9', 'rgb(40,140,255)', 'rgb(231,186,8)']
        };
        window.addEventListener("resize", function () {
            var eleChart = echarts.init(document.getElementById('energyGraph')); //电量图
            eleChart.resize();
        });
    </script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                startTime: "",
                activeName: "first",
                endTime: "",
                value: "",
                value1: '',
                value2: '',
                isShow: false,
                graphId: "",
                BASE_URL: "",
                modelName: "",
                selectModelName:"",
                modelInfo: "",
                dataSession: "",
                dataSession1: "",
                modelVersion: "",
                source_mode: "",
                source_modes: [],
                fileList: [],
                options: [],
                tableHeader: {},
                tableData: [],
                tableHeader1: {},
                tableData1: [],
                analyseValue: "",
                analyseValue1: "",
                modelGenFileList: [],
                generatorModelStartDate: "",
                generatorModelEndDate: "",
                source_mode_name: '',
                preDisabled: true,
                genDisabled: true,
                prePageBeforeSelectModeDisable: true,

                process: undefined
            },
            created:function() {
                that = this
                this.getAllMode()
            },
            mounted:function() {
                window.addEventListener('resize', this.handleResize);
                parent.modifyTitle("电量模型生成");
            },
            destroyed:function() {
                window.removeEventListener('resize', this.handleResize)
            },
            methods: {
                handleClick: async function () {
                    await this.getAllMode();
                    this.source_mode = "";
                },
                handleResize() {
                    this.$nextTick(
                        () => {
                            this.$refs.table.doLayout()
                        }
                    )
                },
                modelSelectChange() {
                    this.prePageBeforeSelectModeDisable = false
                },
                getAllMode: function () {
                    that = this
                    $.ajax({
                        type: "POST",
                        url: "model/electric/getall",
                        dataType: "json",
                        data: {
                            "deviceCode": "yc467",
                        },
                        async: true,
                        success: function (data) {
                            // console.log("data");
                            // console.log(data);

                            if (data.status == 200) {
                                var srcData = data.data;
                                for (var i = 0; i < srcData.length; i++) {
                                    if (srcData[i].used) {
                                        that.selectModelName = srcData[i].modelName;
                                        srcData[i].modelName = srcData[i].modelName+"(使用中)"
                                    }
                                }
                                that.source_modes = srcData;
                            } else {
                                layer.alert(data.msg, {
                                    icon: 5,
                                    title: "提示"
                                });
                            }
                        },
                        failure: function (data) {
                            layer.alert(data.msg, {
                                icon: 5,
                                title: "提示"
                            });
                        }
                    })
                },
                trainDataPageGenDataUpload: function () {
                    that = this
                    if (!this.filterDate(that.startTime, that.endTime)) {
                        return;
                    }
                    let formData = new FormData()
                    formData.append("command", JSON.stringify({
                        "startTime": that.startTime,
                        "endTime": that.endTime,
                        "deviceCode": "yc467"
                    }))
                    if (this.fileList.length > 0) {
                        formData.append("extraData", this.fileList[0])
                    }

                    $.ajax({
                        type: "POST",
                        url: "model/electric/dataprocess/",
                        dataType: "json",
                        processData: false,
                        contentType: false,
                        data: formData,
                        async: true,
                        success: function (data) {
                            if (data.status == 200) {
                                let header = data.data.columns;
                                let tableHeaerList = []
                                for (var i = 0; i < header.length; i++) {
                                    let tableHeaer = {}
                                    tableHeaer["column_name"] = i.toString()
                                    tableHeaer["column_comment"] = header[i];
                                    tableHeaerList.push(tableHeaer)
                                }
                                that.tableHeader = tableHeaerList
                                let datas = data.data.data;
                                let tableData = []
                                for (var i = 0; i < datas.length; i++) {
                                    let current_data = datas[i];
                                    let tmp_data = {}
                                    for (var idx = 0; idx < current_data.length; idx++) {
                                        tmp_data[idx.toString()] = current_data[idx];
                                    }
                                    tableData.push(tmp_data)
                                }
                                that.tableData = tableData
                                that.handleResize();
                                that.dataSession = data.data.dataSession
                                that.genDisabled = false;
                            } else {
                                layer.alert(data.msg, {
                                    icon: 5,
                                    title: "提示"
                                });
                            }
                        },
                        failure: function (data) {
                            layer.alert(data.msg, {
                                icon: 5,
                                title: "提示"
                            });
                        }
                    })
                },
                modelGenFileRemove: function () {
                    this.modelGenFileList.pop()
                },
                fileRemove: function () {
                    this.fileList.pop()
                },
                preDataPageGenDataUpload: function () {
                    that = this;
                    that.process = undefined
                    if (!this.filterDate(that.generatorModelStartDate, that.generatorModelEndDate)) {
                        return;
                    }
                    let formData = new FormData()
                    formData.append("command", JSON.stringify({
                        "startTime": that.generatorModelStartDate,
                        "endTime": that.generatorModelEndDate,
                        "deviceCode": "yc467"
                    }))
                    if (this.modelGenFileList.length > 0) {
                        formData.append("extraData", this.modelGenFileList[0])
                    }
                    $.ajax({
                        type: "POST",
                        url: "model/electric/dataprocess/" + that.source_mode,
                        dataType: "json",
                        processData: false,
                        contentType: false,
                        data: formData,
                        async: true,
                        success: function (data) {
                            if (data.status == 200) {
                                let header = data.data.columns;
                                let tableHeaerList = []
                                for (var i = 0; i < header.length; i++) {
                                    let tableHeaer = {}
                                    tableHeaer["column_name"] = i.toString()
                                    tableHeaer["column_comment"] = header[i];
                                    tableHeaerList.push(tableHeaer)
                                }
                                that.tableHeader1 = tableHeaerList
                                let datas = data.data.data;
                                let tableData = []
                                for (var i = 0; i < datas.length; i++) {
                                    let current_data = datas[i];
                                    let tmp_data = {}
                                    for (var idx = 0; idx < current_data.length; idx++) {
                                        tmp_data[idx.toString()] = current_data[idx];
                                    }
                                    tableData.push(tmp_data)
                                }
                                that.tableData1 = tableData
                                that.handleResize();
                                that.dataSession1 = data.data.dataSession
                                that.preDisabled = false;
                            } else {
                                layer.alert(data.msg, {
                                    icon: 5,
                                    title: "提示"
                                });
                            }
                        },
                        failure: function (data) {
                            layer.alert(data.msg, {
                                icon: 5,
                                title: "提示"
                            });
                        }
                    })

                },
                download: function () {
                    window.location.href = "file/download/data.zip"
                },
                fileChange: function (file, fileList) {
                    this.fileList.pop()
                    if (file.name.indexOf(".xls") != -1 || file.name.indexOf(".xlsx") != -1 || file.name.indexOf(".csv") != -1) {
                        this.fileList.push(file.raw);
                    } else {
                        this.$message.error('只能上传.xls/.xlsx/.csv格式文件!');
                    }

                },
                modelGenFileChange: function (file, fileList) {
                    this.modelGenFileList.pop()
                    if (file.name.indexOf(".xls") != -1 || file.name.indexOf(".xlsx") != -1 || file.name.indexOf(".csv") != -1) {
                        this.modelGenFileList.push(file.raw);
                    } else {
                        this.$message.error('只能上传.xls/.xlsx/.csv格式文件!');
                    }

                },
                generatorModel: async function () {
                    that = this
                    const loading = that.$loading({
                        lock: true,
                        text: '模型生成中...',
                        spinner: 'el-icon-loading',
                        background: 'rgba(0, 0, 0, 0.7)'
                    });
                    $.ajax({
                        type: "POST",
                        url: "model/electric/create",
                        dataType: "json",
                        contentType: "application/json",
                        data: JSON.stringify({
                            "modelName": that.modelName,
                            "modelInfo": that.modelInfo,
                            "dataSession": that.dataSession,
                        }),
                        async: true,
                        success: function (data) {
                            // that.getAllMode();
                            if (data.status == 200) {
                                that.modelVersion = data.data.modelVersion
                                that.$message({
                                    message: '模型' + that.modelName + '创建成功',
                                    type: "success"
                                })
                                that.genDisabled = true
                                that.source_mode = that.modelVersion;
                                that.source_modes.push({
                                    modelName: that.modelName,
                                    used: false,
                                    modelVersion: that.modelVersion,
                                    modelInfo:that.modelInfo
                                });
                                loading.close();
                                that.activeName = "second";
                                that.prePageBeforeSelectModeDisable = false;
                            } else {
                                loading.close();
                                layer.alert(data.msg, {
                                    icon: 5,
                                    title: "提示"
                                });
                            }
                        },
                        failure: function (data) {
                            loading.close();
                            layer.alert(data.msg, {
                                icon: 5,
                                title: "提示"
                            });
                        }
                    })
                },
                predictData: function () {
                    that = this;
                    that.source_mode_name = $("#eleSourceModel").val();
                    // 每3秒轮询一次
                    that.$message("正在预测，请稍等...")
                    that.preDisabled = true
                    that.process = 0.0

                    let count = 0;

                    interval = window.setInterval(function () {
                        that.getPredictResult(interval, count)
                        count += 1
                    }, 5000)
                },
                getPredictResult: function (interval, count) {
                    that = this
                    $.ajax({
                        type: "POST",
                        url: "model/electric/modelpredict",
                        dataType: "json",
                        contentType: "application/json",
                        async: true,
                        data: JSON.stringify({
                            "modelVersion": that.source_mode,
                            "dataSession": that.dataSession1,
                            "flag": count == 0 ? true : false
                        }),
                        success: function (data) {
                            // 修改状态
                            $.ajax({
                                type: "POST",
                                url: "model/modelpredictFeedback",
                                dataType: "json",
                                contentType: "application/json",
                                data: JSON.stringify({
                                    "modelId": that.source_mode
                                }),
                                async: true,
                                success: function (data) {
                                    if (data.status == 1) {
                                        this.$message({
                                            type: 'success',
                                            message: data.msg
                                        });
                                    } else {
                                        layer.alert(data.msg, {
                                            icon: 5,
                                            title: "提示"
                                        });
                                    }
                                },
                                failure: function (data) {
                                    layer.alert(data.msg, {
                                        icon: 5,
                                        title: "提示"
                                    });
                                }
                            });

                            if (data.status == 200) {
                                let res = data.data

                                if (res.error != undefined && res.error != null && res.error != "") {
                                    that.$message.error('预测失败:' + res.error)
                                    if (interval != undefined) {
                                        window.clearInterval(interval)
                                    }
                                    that.preDisabled = false
                                    return;
                                }

                                if (res.complete) {
                                    that.$message({
                                        message: "预测完成",
                                        type: "success"
                                    })
                                    // 如果显示预测完成，则取出数据，然后绘图，否则轮询，不做操作
                                    if (interval != undefined) {
                                        window.clearInterval(interval)
                                    }
                                    drawEleChart(res, "energyGraph")

                                    // 禁止预测数据按钮多次点击，当预测完成才能继续点击
                                    that.preDisabled = false
                                    that.process = 100
                                } else {
                                    that.$message("正在预测，请稍等...")
                                    if (res.process != null) {
                                        that.process = res.process
                                    }
                                }
                            } else {
                                if (interval != undefined) {
                                    window.clearInterval(interval)
                                }
                                layer.alert(data.msg, {
                                    icon: 5,
                                    title: "提示"
                                });
                            }
                        }, failure: function (data) {
                            if (interval != undefined) {
                                window.clearInterval(interval)
                            }
                            layer.alert(data.msg, {
                                icon: 5,
                                title: "提示"
                            });
                        }
                    })
                },
                keepOld: function () {
                    this.$message({
                        type: 'success',
                        message: '保持旧模型!'
                    });
                },
                useNew: function () {
                    let that = this
                    this.$confirm('使用新模型？, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        $.ajax({
                            type: "POST",
                            url: "model/electric/select",
                            dataType: "json",
                            contentType: "application/json",
                            data: JSON.stringify({
                                "deviceId": 1,
                                "modelVersion": that.source_mode,
                            }),
                            async: true,
                            success: function (data) {
                                if (data.status == 200) {
                                    this.$message({
                                        type: 'success',
                                        message: '设置成功！'
                                    });
                                } else {
                                    layer.alert(data.msg, {
                                        icon: 5,
                                        title: "提示"
                                    });
                                }
                            },
                            failure: function (data) {
                                layer.alert(data.msg, {
                                    icon: 5,
                                    title: "提示"
                                });
                            }
                        })
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消'
                        });
                    });
                },
                filterDate: function (start, end) {
                    if (start - end >= 0) {
                        layer.alert('结束日期应在开始日期之后!', {
                            icon: 5,
                            title: "错误"
                        });
                        return false;
                    }
                    return true;
                }
            }
        }
        );
    </script>

</body>

</html>